<script>

import IntelligentList from "@/views/aihuman/IntelligentInteraction/List.vue";
import AddProject from "@/views/aihuman/IntelligentInteraction/addProject/addProject.vue";
import {mapGetters} from "vuex";

export default {
  name: "IntelligentInteraction",
  components: {AddProject, IntelligentList},
  data() {
    return {
      searchForm: {
        projectName: '',
        dateRange: '',
        dimensionType: ''
      },
      tabs: 'first',
      options: [
        {
          label: '2D',
          value: 2
        },
        {
          label: 'Web3D',
          value: 3
        },
        {
          label: 'UE3D',
          value: 4
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        creationAdd: this.vaildData(this.permission[`creation-add`], false)
      }
    }
  },
  methods: {
    previewItem(item) {
      console.log(item);
      this.$refs.projectRef.open(item, 'preview')
    },
    editItem(item) {
      this.$refs.projectRef.open(item,'edit')
    },
    addProject() {
      this.$refs.projectRef.open({}, 'add')
    },
    search() {
      this.$refs.listRef.searchForm.projectName = this.searchForm.projectName
      this.$refs.listRef.searchForm.createStartTime = this.searchForm.dateRange[0] ? this.searchForm.dateRange[0] + ' 00:00:00' : ''
      this.$refs.listRef.searchForm.createEndTime = this.searchForm.dateRange[1] ? this.searchForm.dateRange[1] + ' 23:59:59' : ''
      this.$refs.listRef.searchForm.dimensionType = this.searchForm.dimensionType

      this.$refs.listRef.page.pageNo = 1

      this.$refs.listRef.getList()
    },
    onReset() {
      this.$refs.listRef.searchForm = {}
      this.searchForm = {
        projectName: '',
        dateRange: ''
      }
      this.$refs.listRef.getList()
    }
  }
}
</script>

<template>
  <huilan-basic>
    <div class="header-box">
      <el-tabs v-model="tabs">
        <el-tab-pane label="智能交互" name="first"></el-tab-pane>
      </el-tabs>
      <div class="header-box__btn">
        <el-button
          v-if="permissionList.creationAdd"
          type="success" size="small" @click="addProject">新增项目</el-button>
      </div>
    </div>
    <huilan-basic-toolbar>
      <el-form :model="searchForm" inline size="small" class="Huilan-basic-search-form">
        <el-form-item style="margin-top: -1px;">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            unlink-panels
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.projectName" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.dimensionType" placeholder="数字人类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="search-from-tool">
          <el-button type="primary" @click="search"><i class="el-icon-search"></i></el-button>
          <el-button type="default" @click="onReset"><i class="aicosicon aicos-icon-clear"></i></el-button>
        </el-form-item>
      </el-form>
    </huilan-basic-toolbar>

    <intelligent-list
      ref="listRef"
      @on-preview="previewItem"
      @on-edit="editItem"
    />

    <add-project
      ref="projectRef"
      @save="search"
    />
  </huilan-basic>
</template>

<style scoped lang="scss">
.Huilan-basic-search-form {
  /deep/ .el-form-item {
    margin-bottom: 0;
  }

  .search-from-tool {
    margin-right: 0;

    /deep/ .el-form-item__content {
      line-height: 1px;
    }

    /deep/ .el-button--small {
      padding: 5px;

      i {
        font-size: 20px;
      }
    }
  }
}

.header-box {
  //display: flex;
  //justify-content: flex-end;
  height: 40px;
  //align-items: center;
  position: relative;

  &__btn {
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>
